<template>
  <div>
    <el-card>
      <el-row type="flex">
        <el-col :span="12">
          <el-button @click="AddDialog">添加经纪</el-button>
        </el-col>
        <el-col :span="12">
          <el-input v-model="name_contains" @change='queryFn'>
            <el-button slot="append" icon="el-icon-search" @click="queryFn" ></el-button>
          </el-input>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-table border :data="register">
        <el-table-column prop="image" label="图片">
          <template v-slot="{row}">
           <img  :src='row.image' style="width:200px" alt="" >
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column label="操作" fixed="right" width="280">
          <template v-slot="{row}">
            <el-button type="primary" size="small" 
              @click="editFn(row.id)">编辑</el-button
            >
            <el-button type="danger" size="small"
              @click="dleFn(row.id)">删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type='flex' justify='center'>
        <el-pagination
      background layout="total,prev, pager, next" 
      :total="total" 
      :page-size="limit" 
      @current-change='currPage'>
      </el-pagination>
      </el-row>
      <!-- 弹窗组件 -->
      <addDrawer ref='dialog' :show-dialog.sync="ShowDialog" @confirmEventFn='getBrokersList' />
    </el-card>
  </div>
</template>

<script>
import { getBrokers,getAmount,delBrokers } from "@/api/brokers";
import addDrawer from './add-Drawer.vue'
export default {
  components: {addDrawer},
  data() {
    return {
      limit: 2,
      start: 0,
      total:0,
      register: [],
      ShowDialog: false,
      name_contains:''
      
    };
  },
  created() {
    this.getBrokersList();

  },
  methods: {
    async queryFn(){
     if(this.name_contains){
      const filter = await getBrokers({
       name_contains:this.name_contains
     })
    console.log(filter);
    this.register = filter.data
     }else{
       this.getBrokersList()
     }

    },
    //删除经纪人
     dleFn(id){
        this.$confirm('是否删除角色', '删除', {
        type: 'warning'
      }).then(async() => {
        await delBrokers(id)
        this.getBrokersList()
      }).catch(() => {
        console.log('点击了取消按键')
      })
       
    },
    //编辑弹窗
   async editFn(id){
        this.ShowDialog=true
       this.$refs.dialog.getBrokersData(id)
    
      
       

    },
    //新增弹窗
    AddDialog(){
     this.ShowDialog=true
    },
    //渲染经纪人列表
    async getBrokersList() {
      const arr = await getBrokers({
        _limit: this.limit,
        _start: this.start,
       
      });
    
      this.register=arr.data
      //获取经纪人数量
      const res = await getAmount()
     
      this.total = res.data
    },
    //跳转分页
    currPage(id){
       this.start=id === 1 ? 0 : (id - 1) * this.limit
       this.getBrokersList()
    }
  },
};
</script>

<style lang='scss'>
.el-pagination{
  margin-top: 20px;
}
.el-card {
  margin: 20px;
}

</style>
